<template>
    <div class="person">
        姓:<input type="text" v-model="lastName"><br>
        名:<input type="text" v-model="firstName"><br>
        姓名1:<span>{{ fullname_1 }}</span><br>
        姓名2:<span>{{ fullname_2 }}</span><br>
        <button @click="changeName">改名为lisi</button>
    </div>
</template>
<script lang="ts">
    export default {
        name: 'person'
    }
</script>

<script lang="ts" setup>
    import {ref,computed } from 'vue';

    let lastName = ref('zhang');
    let firstName = ref('san');

    // 只可读的计算属性
    let fullname_1 = computed(()=>{
        return lastName.value.slice(0,1).toUpperCase() + lastName.value.slice(1) + '-' + firstName.value;
    })
    
    let fullname_2 = computed({
        get(){
            return lastName.value.slice(0,1).toUpperCase() + lastName.value.slice(1) + '-' + firstName.value;
        },
        set(value){
            let names = value.split('-');
            lastName.value = names[0];
            firstName.value = names[1];
        }
    })

    function changeName(){
            lastName.value = 'li'
            firstName.value = 'si';
        }
    
</script>

<style>
    input{
        border-radius: 5px;
    }
</style>